<template>
	<Row class="rowboxs">
		<Col span="24" class="perth4">
            <h3>生产产量</h3>
        </Col>
        <Col span="24">
            <Card class="btm0">
                <div id="jiachun" style="width:100%;height: 200px;">
                </div>
            </Card>
        </Col>
        <Col span="24">
            <Card>
                <div id="fangxiang" style="width:100%;height: 200px;">
                </div>
            </Card>
        </Col>
    </Row>
</template>
<script>
export default {
  data () {
    return {
      "charts": "",
      "option": {
        "title": {
          "text": '甲醇',
          "left": 'center'
        },
        "xAxis": {
          "type": 'category',
          "data": ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        "yAxis": {
          "type": "value",
          "name": "单位/吨"
        },
        "grid": {
          "top": '16%'
        },
        "series": [{
          "data": [520, 732, 901, 584, 1290, 1030, 1320],
          "type": "line",
          "smooth": true
        }]
      }
    };
  },
  methods: {
    drawPie (id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption(this.option);
    }
  },
  mounted () {
    this.drawPie('jiachun');
    this.drawPie('fangxiang');
  }
};
</script>
<style scoped>
    .perth4{
        line-height: 35px;
    }
    .btm0 div{
        padding-bottom: 0!important;
    }
</style>